<template>
  <div class="indexBox">
    <el-container>
      <el-aside :class="classObj" class="app-wrapper">
        <router-link to="/home">
          <div class="title">
            <h3>
              <img src="../assets/icon.png" alt="" />
              <transition name="sidebarLogoFade">
                <span v-if="sidebar.opened"> 车辆大数据分析系统</span>
              </transition>
            </h3>
          </div>
        </router-link>
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          background-color="#283618"
          text-color="#B3BDB6"
          active-text-color="#FFFFFF"
          :collapse="!sidebar.opened"
          :collapse-transition="false"
          :unique-opened="true"
          :router="true"
        >
          <el-submenu
            :index="item.menuid"
            v-for="(item, index) in routes"
            :key="index"
          >
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item-group v-if="item.children.length > 0">
              <el-menu-item
                :index="subItem.routerURL"
                :route="subItem.routerURL"
                v-for="(subItem, subIndex) in item.children"
                :key="subIndex"
                >{{ subItem.title }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <hamburger
            class="hamburger-container"
            :is-active="sidebar.opened"
            @toggleClick="toggleSideBar"
          ></hamburger>

          <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />

          <div class="right-menu">
            <screenfull id="screenfull" class="right-menu-item hover-effect" />
            <el-dropdown
              class="avatar-container right-menu-item hover-effect"
              trigger="click"
            >
              <div class="avatar-wrapper">
                <img :src="circleUrl" class="user-avatar" />
                <i class="el-icon-caret-bottom" />
                <!-- <el-avatar size="medium" :src="circleUrl"></el-avatar> -->
              </div>

              <el-dropdown-menu slot="dropdown">
                <router-link to="/home/profile">
                  <el-dropdown-item>个人中心</el-dropdown-item>
                </router-link>
                <el-dropdown-item divided @click.native="logout">
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <div class="fixed-header" :style="{ width: tagWidth }">
          <tags-view />
        </div>
        <el-main>
          <appMain></appMain>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Hamburger from "@/components/Hamburger";
import Breadcrumb from "@/components/Breadcrumb";
import Screenfull from "@/components/Screenfull";
import AppMain from "./AppMain.vue";
import TagsView from "./TagsView/index.vue";

export default {
  data() {
    return {
      activeMenu: "/home/welcome",
      opened: false,
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  components: {
    Hamburger,
    Breadcrumb,
    Screenfull,
    AppMain,
    TagsView,
  },
  computed: {
    ...mapState({
      sidebar: (state) => state.app.sidebar,
      routes: (state) => state.permission.routes,
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
      };
    },
    tagWidth() {
      return this.sidebar.opened ? "calc(100% - 280px)" : "calc(100% - 63px)";
    },
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    logout() {
      this.$confirm("确定注销并退出系统吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$router.replace("/login");
      });
    },
  },
  mounted() {
    this.activeMenu = this.$route.path;
  },
};
</script>

<style lang="scss" scoped>
$header-height: 50px;

.el-header {
  background-color: #ffffff;
  text-align: center;
  padding: 0;
  height: $header-height !important;
}

.el-aside {
  background-color: #283618;
  color: #333;
  text-align: center;
  min-height: 100vh;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: left;
}

body > .el-container {
  margin-bottom: 40px;
}

.indexBox {
  height: 100%;
}

.el-menu-vertical-demo {
  border: transparent;
}
.app-wrapper {
  text-align: left;
  overflow: hidden;
}
.title {
  padding: 20px;
  color: white;
  text-align: center;
  height: 60px;
  h3 {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  img {
    height: 32px;
  }
  i {
    font-size: 26px;
  }
}
.hideSidebar {
  width: 63px !important;
  transition: 0.3s;
}
.openSidebar {
  width: 280px !important;
  transition: 0.3s;
}

.hamburger-container {
  line-height: $header-height;
  height: 100%;
  float: left;
  cursor: pointer;
  transition: background 0.3s;
  -webkit-tap-highlight-color: transparent;

  &:hover {
    background: rgba(0, 0, 0, 0.025);
  }
}
#breadcrumb-container {
  float: left;
  height: $header-height !important;
}
.right-menu {
  float: right;
  height: $header-height !important;
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.sidebarLogoFade-enter-active {
  transition: opacity 2s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
  opacity: 0;
}
// 头像
.avatar-container {
  margin: 0 30px 0 20px;

  .avatar-wrapper {
    margin-top: 5px;
    position: relative;

    .user-avatar {
      cursor: pointer;
      width: 32px;
      height: 32px;
      border-radius: 10px;
    }

    .el-icon-caret-bottom {
      cursor: pointer;
      position: absolute;
      right: -20px;
      top: 25px;
      font-size: 12px;
    }
  }
}
// tags-view相关
.fixed-header {
  position: absolute;
  top: $header-height;
  right: 0;
  z-index: 9;
  transition: width 0.3s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}
</style>

<style>
a {
  color: #fff;
  text-decoration: none;
}
</style>
